<template>
    <div class="user-profile">
        <group>
            <x-input title="姓名" placeholder="请输入姓名" label-width="7.5rem" v-model="name"></x-input>
            <checker
                class="sex-select"
                v-model="sex"
                default-item-class="sex-default"
                selected-item-class="sex-selected">
                <checker-item value="男"></checker-item>
                <span class="sex-label">男</span>
                <checker-item value="女"></checker-item>
                <span class="sex-label">女</span>
            </checker>
            <x-input
                title="联系电话"
                placeholder="请输入联系电话"
                label-width="7.5rem"
                v-model="phone"></x-input>
            <datetime :min-year="this.minYear" :max-year="this.maxYear" v-model="birthday" title="出生年月"></datetime>
            <x-input
                title="验证码"
                class="weui-vcode"
                label-width="7.5rem"
                placeholder="请输入验证码"
                v-model="code">
                <x-button slot="right" :disabled="this.isSendCode" type="primary" mini="mini" @click.native="sendCode">{{ this.codeBtnTitle }}</x-button>
            </x-input>
            <x-input title="QQ号" placeholder="请输入QQ号" label-width="7.5rem" v-model="qq"></x-input>
            <x-input title="微信号" placeholder="请输入微信号" label-width="7.5rem" v-model="wechat"></x-input>
        </group>
        <div class="btn-block">
            <x-button type="primary" @click.native="submit">确定</x-button>
        </div>
    </div>
</template>

<script>
    import {
        Group,
        XInput,
        XButton,
        Datetime,
        Checker,
        CheckerItem
    } from 'vux'
    import {Util} from '@/js/Util'
import { setInterval, clearInterval } from 'timers';
    export default {
        components: {
            Group,
            XInput,
            XButton,
            Datetime,
            Checker,
            CheckerItem
        },
        data() {
            return {codeBtnTitle: '发送验证码', isSendCode: false, code: '', birthday: '', sex: '', name: '', phone: '', qq: '', wechat: '', minYear: 1970, maxYear: 2010}
        },
        mounted() {
            this.setTitle();
            this.hasQuery();
        },
        methods: {
            setTitle() {
                document.title = '修改信息';
            },
            hasQuery() {
                let openid = sessionStorage.getItem('MeiJingKu_openid');
                if (!openid) {
                    this
                        .$router
                        .push({name: 'user_index'});
                    return false;
                }
                this.getList();
            },
            getList() {
                let openid = sessionStorage.getItem('MeiJingKu_openid');
                this
                    .$vux
                    .loading
                    .show({text: 'Loading'});
                this
                    .$http
                    .get('user/PersonalInfo/v1?openid=' + openid)
                    .then(response => {
                        this
                            .$vux
                            .loading
                            .hide();
                        let result = response.data;
                        this.name = result.data.name;
                        this.phone = result.data.phone;
                        this.birthday = result.data.birthday;
                        this.qq = result.data.qq;
                        this.wechat = result.data.weixin;
                        this.sex = result.data.sex;
                    }, response => {
                        Util.errorWarning(this);
                    });
            },
            sendCode() {
                // 验证手机号
                if(!Util.verifyPhone(this.phone)) {
                    this.$vux.toast.text('手机号格式有误', 'bottom');
                    return false;
                }
                this.$http.get('user/SendSMS/v1?phone=' + this.phone).then(response => {
                    let result = response.data;
                    if(!result.code) {
                        this.$vux.toast.text(result.data, 'bottom');
                    }else {
                        this.$vux.toast.text(result.message, 'bottom');
                        return false;
                    }
                    this.isSendCode = true;
                    let _self = this,
                        time = 60,
                        countDown = setInterval(function() {
                            _self.codeBtnTitle = time + 's';
                            time--;
                            if(time <= -1) {
                                _self.codeBtnTitle = '发送验证码';
                                _self.isSendCode = false;
                                clearInterval(countDown);
                            }
                        }, 1000);
                }, response => {
                    Util.errorWarning(this);
                });
            },
            submit() {
                let openid = sessionStorage.getItem('MeiJingKu_openid');
                this.$http.get('user/UpdateInfo/v1?openid=' + openid + '&name=' + this.name + '&sex=' + this.sex + '&phone=' + this.phone + '&code=' + this.code + '&birthday=' + this.birthday + '&qq=' + this.qq + '&weixin=' + this.wechat).then(response => {
                    let result = response.data;
                    if(result.code) {
                        this.$vux.toast.text(result.message, 'bottom');
                        return false;
                    }
                    this.$vux.toast.text(result.data, 'bottom');
                    location.reload();
                }, response => {
                    Util.errorWarning(this);
                });
            }
        }
    }
</script>

<style lang="less" scoped="scoped">
    .user-profile {
        margin-top: 2rem;

        .sex-default {
            width: 2.4rem;
            height: 2.4rem;
            border-radius: 1.2rem;
            border: 0.1rem solid #aaa;
            background: #fff;
        }

        .sex-select {
            margin-left: 25%;
        }

        .sex-selected {
            background: #5ad4f1;
            border: 0;
            width: 2.6rem;
            height: 2.6rem;
            border-radius: 1.3rem;
        }

        .sex-label {
            margin: 1rem 1.4rem;
            position: relative;
            top: -.8rem;
            font-size: 1.4rem;
        }

        .btn-block {
            padding: 10rem 10%;
        }
    }
</style>